.toolbar-container {
   background-color: #333;
   color: #bcbcbc;
   text-shadow: 0 -1px 0 #000;
   border-top: 1px solid #4f4f4f;
}

.toolbar-container .btn {
   background-color: #fafafa;
   background-image: -webkit-linear-gradient(top,#fff,#f2f2f2);
   background-image: -moz-linear-gradient(top,#fff,#f2f2f2);
   background-image: linear-gradient(top,#fff,#f2f2f2);
   background-repeat: repeat-x;
   border: 1px solid #d4d4d4;
   color: #333;
   text-shadow: none;
   border-top: none;
}

.toolbar-container label,
.toolbar-container output {
   font-size: .8em;
}

.toolbar-container label {
   margin-left: 10px;
}

.toolbar-container input[type="range"] {
   width: 80px;
   text-shadow: 0 -1px 0 #000;
   color: #ddd;
   box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1),0px 0 0 1px rgba(255,255,255,0.1);
   border: 1px solid black;
   background: transparent;
   height: 1px;
   vertical-align: middle;
}

@media screen and (min-width:0\0) {
    /* IE9 & IE10 */
    .toolbar-container input[type="range"] {
	height: 20px;
	text-align: right;
    }

    #output-gridsize {
	display: none;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10 only */
    .toolbar-container input[type="range"] {
	height: 5px;
	border-style: hidden;
	box-shadow: none;
	position: absolute;
    }

    #output-gridsize {
	margin-left: 90px;
	display: inline;
    }

    .toolbar-container input[type="range"]::-ms-fill-lower {
	background-color: lightgray;
    }

    .toolbar-container input[type="range"]::-ms-fill-upper {
	background-color: white;
    }

    .toolbar-container input[type="range"]::-ms-track {
	color: transparent;
    }

    .toolbar-container input[type="range"]::-ms-thumb {
	background-color:  #242424;
	border-style: hidden;
    }

    .toolbar-container input[type="range"]::-ms-tooltip {
	display: none;
    }
}
